<template>
	<view class="show-content">
		<uni-popup ref="showContent" type="center" :maskClick="false">
			<view class="wrapper ac">
				<view class="fs25 mb70 name-color">{{content}}</view>
				<view class="btn-str mx-auto fs28 ac">{{btnStr}}</view>
				<view class="close" @click="close">x</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {}
		},
		components: {
uniPopup
		},
		props: {
			content:{
				type:[String],
				default:'当前账户没有会员卡，无法打水'
			},
			btnStr:{
				type:[String],
				default:'去开卡'
			},
		},
		created() {},
		mounted() {},
		methods: {
			open(){
				this.$refs.showContent.open();
			},
			close(){
				this.$refs.showContent.close();
			},
			cancel(){
				this.$emit('cancel');
				this.close();
			},
			confirm(){
				this.$emit('confirm');
				this.close();
			}
		}
	}
</script>

<style lang="scss">
	.wrapper{
		width: 520rpx;
		height: 270rpx;
		background-color: #F7F7F7;
		border-radius: 28rpx;
		position: relative;
		padding:60rpx 70rpx 30rpx;
		.btn-str{
			width: 290rpx;
			height: 62rpx;
			line-height: 62rpx;
			background: linear-gradient(-90deg, #37A9FF, #6DFFFF);
			border-radius: 31rpx;
			color:#fff;
		}
		.close{
			width: 34rpx;
			height: 34rpx;
			line-height: 26rpx;
			text-align: center;
			border-radius: 50%;
			font-size: 27rpx;
			color:#F7F7F7;
			border:1rpx solid #F7F7F7;
			position: absolute;
			bottom:-50rpx;
			left:50%;
			transform: translateX(-50%);
		}
	}
</style>